<script setup lang="ts">
import {ref, computed} from "vue";
import Border from "../../components/Border.vue";
import {NSpace, NTag} from 'naive-ui';
import Tag from '../../components/Tag.vue'

const names = ref([
  {name: '张三'},
  {name: '李四'},
  {name: '王五'},
  {name: '赵六'},
  {name: '钱六'},
]);

const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

const even = computed(() => {
  return numbers.value.filter(n => n % 2 === 0);
})

</script>

<template>
  <div class="m-3 p-3 shadow border rounded-3 ">
    <p>v-for...of</p>
    <ul class="list-group">
      <li class="list-group-item" v-for="(item,idx) of names">{{ item.name }}</li>
    </ul>
  </div>
  <div class="m-3 p-3 shadow border rounded-3 ">
    <p>v-for...in</p>
    <ul class="list-group">
      <li class="list-group-item" v-for="(item,idx) in names">{{ item.name }}</li>
    </ul>
  </div>
  <border>
    <div class="card">
      <div class="card-header">在 v-for 里使用范围值</div>
      <div class="card-body">
        <span v-for="n in 10">{{ n }}</span>
      </div>
    </div>
  </border>

  <border>
    <div class="card">
      <div class="card-header">组件上使用 v-for</div>
      <div class="card-body">
        <n-space>
          <tag v-for="(item,idx) of names" :name="item.name"></tag>
        </n-space>
      </div>
    </div>
  </border>
  <border>
    <div class="card">
      <div class="card-header">展示过滤或排序后的结果</div>
      <div class="card-body">
        <n-space>
          <n-tag v-for="(item,idx) of even" type="info">{{ item }}</n-tag>
        </n-space>
      </div>
    </div>

  </border>

</template>

<style scoped>

</style>